<template>
  <div class="restContainer">
    <head-top head-title="重置密码" goBack="true"></head-top>
    <form class="restForm">
      <section class="input_container phone_number">
        <input
          type="text"
          placeholder="账号"
          name="phone"
          maxlength="11"
          v-model="phoneNumber"
          @input="inputPhone"
        />
        <!-- <button @click.prevent="getVerifyCode" :class="{right_phone_number:rightPhoneNumber}" v-show="!computedTime">获取验证码</button>
        <button  @click.prevent v-show="computedTime">已发送({{computedTime}}s)</button>-->
      </section>
      <section class="input_container">
        <input type="text" placeholder="旧密码" name="oldPassWord" v-model="oldPassWord" />
      </section>
      <section class="input_container">
        <input type="text" placeholder="请输入新密码" name="newPassWord" v-model="newPassWord" />
      </section>
      <section class="input_container">
        <input type="text" placeholder="请确认密码" name="confirmPassWord" v-model="confirmPassWord" />
      </section>
      <section class="input_container captcha_code_container">
        <input type="text" placeholder="验证码" name="mobileCode" maxlength="6" v-model="mobileCode" />
        <div class="img_change_img">
          <img v-show="captchaCodeImg" :src="captchaCodeImg" />
          <div class="change_img" @click="getCaptchaCode">
            <p>看不清</p>
            <p>换一张</p>
          </div>
        </div>
      </section>
    </form>
    <div class="login_container" @click="resetButton">确认修改</div>
    <alert-tip v-if="showAlert" :showHide="showAlert" @closeTip="closeTip" :alertText="alertText"></alert-tip>
  </div>
</template>

<script>
import headTop from "src/components/header/head";
import alertTip from "src/components/common/alertTip";
import {
  mobileCode,
  checkExsis,
  sendMobile,
  getcaptchas,
  changePassword
} from "src/service/getData";

export default {
  data() {
    return {
      phoneNumber: null, //电话号码
      oldPassWord: null,
      newPassWord: null, //新密码
      rightPhoneNumber: false, //输入的手机号码是否符合要求
      confirmPassWord: null, //确认密码
      captchaCodeImg: null, //验证码地址
      mobileCode: null, //短信验证码
      computedTime: 0, //倒数记时
      showAlert: false, //显示提示组件
      alertText: null, //提示的内容
      accountType: "mobile", //注册方式
      captchaCodeImg: null
    };
  },
  components: {
    headTop,
    alertTip
  },
  created() {
    this.getCaptchaCode();
  },
  methods: {
    //判断输入的电话号码
    inputPhone() {
      if (/.+/gi.test(this.phoneNumber)) {
        this.rightPhoneNumber = true;
      } else {
        this.rightPhoneNumber = false;
      }
    },
    //获取验证吗
    async getVerifyCode() {
      if (this.rightPhoneNumber) {
        this.computedTime = 30;
        //倒计时
        this.timer = setInterval(() => {
          this.computedTime--;
          if (this.computedTime == 0) {
            clearInterval(this.timer);
          }
        }, 1000);
        //判断用户是否存在
        let res = await checkExsis(this.phoneNumber, this.accountType);
        //判断返回的信息是否正确，用户是否注册
        if (res.message) {
          this.showAlert = true;
          this.alertText = res.message;
          return;
        } else if (!res.is_exists) {
          this.showAlert = true;
          this.alertText = "您输入的手机号尚未绑定";
          return;
        }
        //获取验证信息
        let getCode = await mobileCode(this.phoneNumber);
        if (getCode.message) {
          this.showAlert = true;
          this.alertText = getCode.message;
          return;
        }
        this.validate_token = getCode.validate_token;
      }
    },
    async getCaptchaCode() {
      let res = await getcaptchas();
      this.captchaCodeImg = res.code;
    },
    //重置密码
    async resetButton() {
      if (!this.phoneNumber) {
        this.showAlert = true;
        this.alertText = "请输入正确的账号";
        return;
      } else if (!this.oldPassWord) {
        this.showAlert = true;
        this.alertText = "请输入旧密码";
        return;
      } else if (!this.newPassWord) {
        this.showAlert = true;
        this.alertText = "请输入新密码";
        return;
      } else if (!this.confirmPassWord) {
        this.showAlert = true;
        this.alertText = "请输确认密码";
        return;
      } else if (this.newPassWord !== this.confirmPassWord) {
        this.showAlert = true;
        this.alertText = "两次输入的密码不一致";
        return;
      } else if (!this.mobileCode) {
        this.showAlert = true;
        this.alertText = "请输验证码";
        return;
      }
      // 发送重置信息
      let res = await changePassword(
        this.phoneNumber,
        this.oldPassWord,
        this.newPassWord,
        this.confirmPassWord,
        this.mobileCode
      );
      if (res.message) {
        this.showAlert = true;
        this.alertText = res.message;
        this.getCaptchaCode();
        return;
      } else {
        this.showAlert = true;
        this.alertText = "密码修改成功";
      }
    },
    closeTip() {
      this.showAlert = false;
    }
  }
};
</script>

<style lang="scss" scoped>
@import "src/style/mixin";

.restContainer {
  padding-top: 45px;
}
.restForm {
  background-color: #fff;
  margin-top: 14px;
  .input_container {
    display: flex;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid #f1f1f1;
    input {
      @include sc(16.38px, #666);
    }
    button {
      @include sc(15px, #fff);
      font-family: Helvetica Neue, Tahoma, Arial;
      padding: 0.28rem 9.36px;
      border: 1px;
      border-radius: 3.5px;
    }
    .right_phone_number {
      background-color: #4cd964;
    }
  }
  .phone_number {
    padding: 0.7px 18px;
  }
  .captcha_code_container {
    height: 2.47px;
    .img_change_img {
      display: flex;
      align-items: center;
      img {
        @include wh(3.117px, 35px);
        margin-right: 0.47px;
      }
      .change_img {
        display: flex;
        flex-direction: "column";
        flex-wrap: wrap;
        width: 47px;
        justify-content: center;
        p {
          @include sc(11px, #666);
        }
        p:nth-of-type(2) {
          color: #3b95e9;
          margin-top: 0.47px;
        }
      }
    }
  }
}
.captcha_code_container {
  height: 2.47px;
  .img_change_img {
    display: flex;
    align-items: center;
    img {
      @include wh(3.117px, 35px);
      margin-right: 0.47px;
    }
    .change_img {
      display: flex;
      flex-direction: "column";
      flex-wrap: wrap;
      width: 47px;
      justify-content: center;
      p {
        @include sc(11px, #666);
      }
      p:nth-of-type(2) {
        color: #3b95e9;
        margin-top: 0.47px;
      }
    }
  }
}
.login_container {
  margin: 23px 0.117px;
  @include sc(16.38px, #fff);
  background-color: #4cd964;
  padding: 0.117px 0;
  border: 1px;
  border-radius: 3.5px;
  text-align: center;
}
</style>
